﻿{extend name="layout/base" /}

{block name="meta"}
  {__block__}
  <style>
    /*商品评价*/
    .apprtime{color: #999;display: inline-block;margin:5px 0;}
    .appraise-head{width:100%; height:80px; display:flex; margin: 10px auto; }
    .appraise-head .text{font-size: 12px; color: #666; font-weight: 400; }
    .percent{line-height: 110%; font-size: 45px; color: #E4393C; font-family: arial; }
    .percent span {font-size: 23px; }
    .app-head-l{flex:1; height:80px;}
    .app-head-lbox{padding: 4px 10px 0 50px; }
    .app-head-r{flex:5; height:80px;}
    .app-head-rbox{display: flex; height: 100%; justify-content: center; align-items: center; padding-left: 20px; }
    .app-hr-item{flex:1; }
    .percentbox{border:1px solid #E4393C; float:left; width:60%; height: 14px; margin-top: 2px; margin-left: 10px; }
    .percentbg{height:100%;background:#E4393C; }
    .app-hr-text{float:left}
    .appr-filterbox li{float: left; padding:5px 10px; }
    .appr-filterbox li .curr{background: #fafafa; color: #e4393c; font-weight: bold;} i{font-style: normal; }
    .apprimg{width:25px !important; height:25px; border-radius:50%; float:left }
    .rating {
      color: #999;
      font-size: 12px
    }
    .rating .fa-star {
      color: #FC0
    }
    .userinfo{width: 100%;height: 26px;}
    .appraises-box{width:960px; border-bottom:1px solid #eee; margin:5px 0; padding:0 5px; }
    .mall-appraises-left{width:84%;height:100%;float:left; }
    .app-content{margin:10px 0; }
    .mall-appraises-right{width:150px;height:100%;float:left; }
    .goods-spec-box{width: 100%; height: 100%; }
    .appraiser{height:100%;float:left;padding-left: 5px; }
    .reply-content{line-height:15px; width:100%; border-top:1px solid #eee; padding-top:10px; color:orange; float:left; margin-bottom: 10px; }
    .reply-time{float:left; color: #999; padding-bottom:10px; }
    .reply-content>a{color:orange; }
    .reply-box{width:100%; max-height:110px; position:relative; margin-bottom:5px; }
    .goods-desc-box img{display: block;}
  </style>
{/block}
{block name="body"}
<body class="shop_list_page">
{/block}

{block name="main"}

  <!-- Main Container -->
  <div class="main-container col2-left-layout">
    <div class="container">
      <div class="row">
        <div class="col-main col-sm-12 col-xs-12">
          <div class="shop-inner">
            <div class="page-title">
              <div class="appraise-head">
                <div class="app-head-l">
                  <div class="app-head-lbox">
                    <strong class="text">好评度</strong>
                    <div class='percent'>
                      <i class="best_percent">{$appCount["best_percent"]}</i><span>%</span>
                    </div>
                  </div>
                </div>
                <div class="app-head-r">
                  <div class="app-head-rbox">
                    <div class="app-hr-item">
                      <div class="app-hr-text">好评(<i class="best_percent">{$appCount["best_percent"]}</i>%)</div>
                      <div class="percentbox">
                        <div class="percentbg" id="best_percentbg" style="width:0%"></div>
                      </div>
                    </div>
                    <div class="app-hr-item">
                      <div class="app-hr-text">中评(<i class="good_percent">{$appCount["good_percent"]}</i>%)</div>
                      <div class="percentbox">
                        <div class="percentbg" id="good_percentbg" style="width:0%"></div>
                      </div>
                    </div>
                    <div class="app-hr-item">
                      <div class="app-hr-text">差评(<i class="bad_percent">{$appCount["bad_percent"]}</i>%)</div>
                      <div class="percentbox">
                        <div class="percentbg" id="bad_percentbg" style="width:0%"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="toolbar">
              <div class="view-mode">
                {mall:pagefilter id="filter" exclude=""}
                  <ul >
                    {volist name="$filter.content" id="item"}
                    {php}
                    $index = $item["value"]?$item["value"]:'all';
                    $index .= 'Num';
                    {/php}
                    <li class="{$item.active?'active':''}"><a href="{$item.url}">{$item.title}</a>(<span id="{$index}">{$appCount[$index]}</span>)</li>
                    {/volist}
                  </ul>
                {/mall:pagefilter}
              </div>
              <div class="sorter">
                <div class="short-by">
                  <ul class="list-unstyled list-inline category-order clearfix">
                    <!-- S 排序 -->
                    {mall:pageorder id="order"}
                    <li class="{$order.active?'active':''}"><a href="{$order.url}">{$order.title}</a></li>
                    {/mall:pageorder}
                    <!-- E 排序 -->
                  </ul>
                </div>
                <div class="short-by page">
                  <label>{:__("Pagesize")}:</label>
                  <select id="pagesize" name="pagesize" onchange="changeUrlParam(this.options[this.options.selectedIndex].value,this.name)">
                    <option value="5" {if $pagesize == 5}selected{/if}>5</option>
                    <option value="10" {if $pagesize == 10}selected{/if}>10</option>
                    <option value="20" {if $pagesize == 20}selected{/if}>20</option>
                    <option value="50" {if $pagesize == 50}selected{/if}>50</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="product-list-area">
              <ul class="products-list" id="products-list">
                {mall:pagelist id='v1' model="Appraise"}
                <li class="item ">
                  <div class="col-main col-sm-12 col-xs-12">
                    <div class="appraises-box">
                      <div class="mall-appraises-right">
                        <div class="userinfo">
                          <img src="{if($v1['avatar'] != null)}{$v1['avatar']}{/if}" class="apprimg" />
                          <div class="appraiser">
                            {$v1['loginName']}
                          </div>
                        </div>
                        <p>{$v1.rankName}</p>
                      </div>
                      <div class="mall-appraises-left">
                        <div class="rating">
                          {for start="1" end="6"}
                          {if($i<=$v1['totalgScore'])}
                          <i class="fa fa-star"></i>
                          {else/}
                          <i class="fa fa-star-o"></i>
                          {/if}
                          {/for}
                        </div>
                        <div class='mall-clear'></div>
                        <p class="app-content">
                          {$v1['content']}
                        <div class="goods-spec-box">
                          {$v1['goodsSpecNames']}
                        </div>
                        </p>
                        {if($v1['receivimg']!='')}
                        {php}$imgs = explode(',',$v1['receivimg']);{/php}
                        <div id="img-file-{i}">
                          {foreach $imgs as $img}
                          <img src="__MALLCDN__{$img}" layer-src="__MALLCDN__{$img}"  style="width:80px;height:80px;" />
                          {/foreach}
                        </div>
                        {/if}
                        <span class="apprtime">{$v1['createtime']}</span>
                        {if($v1['reply']!='' && $v1['reply']!=null)}
                        <div class="reply-box">
                          <p class="reply-content"><a href="javascript:void(0)" onclick="goShop({$v1['shop_id']})">{$v1['name']}</a>：{$v1['reply']}</p>
                          <p class="reply-time">{$v1['replytime']}</p>
                        </div>
                        {/if}
                      </div>
                      <div class="mall-clear"></div>
                    </div>
                  </div>
                </li>
                {/mall:pagelist}
              </ul>
            </div>
            <div class="pagination-area ">
              {mall:pageinfo type="full" /}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Main Container End -->
{/block}

{block name="js"}
{__block__}
  <script type="text/javascript">
      $(function() {
          var best =$('.best_percent').html();
          var good = $('.good_percent').html();
          var bad = $('.bad_percent').html();
          // 背景色
          $('#best_percentbg').css({width: best + '%'});
          $('#good_percentbg').css({width: good + '%'});
          $('#bad_percentbg').css({width: bad + '%'});
      });
  </script>

{/block}
